<template>
  <ul>
    <li @click="gotoShop(item.id)" v-for="item in shopList" :key="item.id">
      <img :src="item.list_pic_url">
      <p>{{item.name}}</p>
      <span>{{item.retail_price|Rmb}}</span>
    </li>
  </ul>
</template>

<script>
export default {
  props:['shopList'],
  methods:{
    gotoShop(id){
      this.$router.push({path:'/detail',query:{id:id}})
    }
  }
}
</script>

<style scoped lang='less'>
  ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      width: 49%;
      text-align: center;
      img{
        width: 100%;
      }
      p{
        font-size: 18px;
        margin: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span{
        font-size: 17px;
        color: red;
      }
    }
  }
</style>